<template>
  <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal" status-icon>
    <el-form-item v-for="(item,index) in formConfig"  :key="index" :label="item.label" :prop="item.prop">
      <!-- 普通输入框 -->
      <el-input
        v-if="item.type==='input'"
        v-model="form[item.prop]"
        :disabled="item.disabled"
        :placeholder="'请输入'+item.label"
      >
      </el-input>
      <!-- 数字类型的输入框 -->
      <el-input
        v-if="item.type==='inputAndNunber'"
        v-model.number="form[item.prop]"
        :disabled="item.disabled"
        :placeholder="'请输入'+item.label"
      >
      </el-input>
      <!-- 单选框 -->
      <el-radio-group v-if="item.type==='radio'" v-model="form[item.prop]">
        <el-radio v-for="(i,index) in item.children" :key="index" :label="i.label" :disabled="i.disabled">
          {{i.title}}
        </el-radio>
      </el-radio-group>
      <!-- 多选框 -->
      <el-checkbox-group v-if="item.type==='checkbox'" v-model="form[item.prop]">
        <el-checkbox v-for="(i,index) in item.children" :key="index" :label="i.label" :disabled="i.disabled">
          {{i.title}}
        </el-checkbox>
      </el-checkbox-group>
      <!-- 选择器 -->
      <el-select v-if="item.type==='select'" v-model="form[item.prop]" placeholder="请选择">
        <el-option v-for="(i,index) in item.children"
          :key="index"
          :label="i.label"
          :value="i.value">
        </el-option>
      </el-select>
      <!-- 日期选择器 -->
      <el-date-picker v-if="item.type==='date'" v-model="form[item.prop]" type="date" size="normal" placeholder="选择日期时间">
      </el-date-picker>
      <el-cascader
        v-if="item.type==='cascader'"
        v-model="form[item.prop]"
        :options="item.options"
        :props="item.props"
        @change="CascaderChange"
      >
      </el-cascader>
    </el-form-item>
    <slot name="submitAndCancel"></slot>
  </el-form>

</template>

<script>
export default {
  name: 'FromNew',
  props: {
    form: Object,
    formConfig: Array,
    rules: Object
  },

  methods: {
    // 级联选择器发生改变时（这里设置只能选择第三级）
    // val是级联选择器所绑定的值（数组）
    CascaderChange (val) {
      if (val.length !== 3) {
        this.$message({
          type: 'warning',
          message: '只能选择第三级分类',
          duration: 1000
        })
        this.form.cateArr = []
      }
    }
  }
}
</script>

<style>

</style>
